<template>
<!--    :style="{height:WinHeight+'px',width:WinWidth+'px'}"-->
    <div class="index"  :style="{height:WinHeight+'px',width:WinWidth+'px'}">
        <div class="top">
            Admin
        </div>
        <div class="main">
            <div class="main_left">
                <div class="SelBox">
                    <span class="SelBox_wz">
                         Select patient information：
                    </span>
                </div>
                <div class="ConBox">
                    <div class="ConBoxDiv">
                        <div class="ConBoxRow">
                            <div class="left_label">institution：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" ZhongShan Hospital" placement="right">
                                    <span>ZhongShan Hospital</span>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Name：</div>
                            <div class="left_value">ZhangSan</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Patient ID：</div>
                            <div class="left_value">7599979</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">PatientSex：</div>
                            <div class="left_value">M</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Patient Age：</div>
                            <div class="left_value">19</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Physician：</div>
                            <div class="left_value">Wang</div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Study Description：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" ABDOMEN" placement="right">
                                    <span>ABDOMEN</span>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Tratment Unit：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" True Beam1" placement="right">
                                    <span>True Beam1</span>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="ConBoxRow">
                            <div class="left_label">Cone：</div>
                            <div class="left_value">
                                <el-tooltip   effect="light" content=" Cone#1/Cone#3/Cone#4/Cone#5" placement="right">
                                    <span>Cone#1/Cone#3/Cone#4/Cone#5</span>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="main_right">
                <div class="ComBox" v-for="(item,i) in list">
                    <div class="ComName">
                        {{item.name}}
                    </div>
                    <div class="ConSize">
                        Diamctor：<span>{{item.size}}mm</span>
                    </div>
                    <div class="ConTime">
                        <i style="margin-right: 5px;position: relative;top: 1px"><img src="../../assets/images/djs.png" alt=""></i>{{item.time.toFixed(2)}}s
                    </div>
                    <div class="ConDesc">
                        Treatment time
                    </div>
                    <div class="ConBtn">
                        <el-switch
                                @change="SwithFun(item,i)"
                                :disabled="item.IsDisabled"
                                v-model="item.IsActiveed"
                                active-color="#24baa6"
                                active-text="ON"
                                inactive-text="OFF"
                                :validate-event="true"
                                :width="112"
                                :height="50"
                                inactive-color="#828181">
                        </el-switch>
                    </div>
                </div>

            </div>
            <div class="main_center">
                <div class="TypeBox">
                    <div class="TypeName">
                        {{ActiceName}}
                    </div>
                    <div class="TypeSize">
                        {{ActiceSize}}
                    </div>
                </div>
                <div class="pointer" :class="ActiceClass" v-show="ActiceClass!='p0'">
                    <img src="../../assets/images/zz.png">
                </div>
            </div>
        </div>
        <div class="bottom">

        </div>
    </div>
</template>

<script>
  const remote = require('electron').remote
var electron = require('electron')
const Menu = remote.Menu
const MenuItem = remote.MenuItem
let {ipcRenderer} = require('electron')
  export default {
    name: 'index',
    data () {
      return {
        WinHeight: electron.screen.getPrimaryDisplay().workAreaSize.height,
        WinWidth: electron.screen.getPrimaryDisplay().workAreaSize.width,
        value: false,
        ActiceName: '',
        ActiceClass: 'p0',
        ActiceSize: '',
        list: [
          {
            name: 'Cone#1',
            size: '5',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          },
          {
            name: 'Cone#2',
            size: '10',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          },
          {
            name: 'Cone#3',
            size: '15',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          },
          {
            name: 'Cone#4',
            size: '20',
            time: 30.00,
            IsActiveed: false,
            IsDisabled: false
          }
        ],
        disTime: null
      }
    },
    mounted () {
      remote.getCurrentWindow().setSize(this.WinWidth, this.WinHeight)
      debugger
      let template = [
        {label: '窗口（1920*1080）',
          accelerator: '',
          click: () => {
            remote.getCurrentWindow().setSize(1920, 1080)
          }},
        {label: '窗口（1366*768）',
          accelerator: '',
          click: () => {
            remote.getCurrentWindow().setSize(1366, 768)
          }},
        {label: '窗口（1280*960）',
          accelerator: '',
          click: () => {
            remote.getCurrentWindow().setSize(1280, 960)
            debugger
            ipcRenderer.sendSync('synchronous-message', 'logined')
          }}
      ]
      let menu = Menu.buildFromTemplate(template)
      // const menu = new Menu();
      // menu.append(new MenuItem({label:'撤销', role: 'undo' }));
      window.addEventListener('contextmenu', function (e) {
        e.preventDefault()
        menu.popup(remote.getCurrentWindow())
      })
  },
    created () {

    },
    methods: {
      SwithFun (item, num) {
        var self = this
        self.ActiceName = item.name.split('Cone')[1]
        self.ActiceClass = 'p' + item.name.split('#')[1]

        self.ActiceSize = 'Φ' + item.size
        console.log(this.list)
        this.list.forEach(function (res) {
          // if(item.name!=res.name)
          // {
          //   res.IsDisabled=true;
          // }
          res.IsDisabled = true
        })
        var i = 0
        self.disTime = setInterval(function () {
          i++
          self.list[num].time = self.list[num].time - 1
          if (i == 30) {
            self.list[num].time = 0
            // self.ActiceName="";
            // self.ActiceSize="";
            // self.list[num].IsActiveed=false;
            clearInterval(self.disTime)
            self.list.forEach(res => {
              if (res.time == 0) {
                res.IsDisabled = true
              } else {
                res.IsDisabled = false
              }
            })
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
    body {
        width: 100%;
        height: 100%;
    }
    .index {
        width: 1920px;
        height: 1080px;
        /*width: 100%;*/
        /*height: 100%;*/
        /*border: 1px solid red;*/
        background-color: #242424;
        background-size: 100% 100%;
        overflow: hidden;
    }
    .top
    {
        width: 265px;
        height: 80px;
        font-size: 40px;
        text-align: center;
        line-height: 145px;
        color: #ffffff;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .main{
        width: 100%;
        height: 920px;
        background:url("../../assets/images/bg.png") center no-repeat;
        position: relative;
    }
    .bottom{
        height: 80px;
        width: 100%;
    }
    .main_left{
        width: 420px;
        height: 660px;
        /*border: 1px solid red;*/
        margin-left: 70px;
        position: relative;
        top: 130px;
        .SelBox{
            width: 365px;
            height: 45px;
            border-radius: 50px;
            border: 1px solid #24baa6;
            color: #24baa6;
            line-height: 45px;
            font-size: 25px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
        }
        .SelBox_wz{
            margin-left: 20px;
        }
        .ConBox{
            width: 100%;
            height: 560px;
            background-color: #5e5e5e;
            border-radius: 30px;
            margin-top: 45px;
        }
        .ConBoxDiv{
            width: 90%;
            /*border: 1px solid red;*/
            margin: 0 auto;
            /*margin-top: 50px;*/
            padding-top: 20px;
        }
        .ConBoxRow{
            width: 100%;
            height: 55px;
            border-bottom: 1px solid #727272;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;

            .left_label{
                color: #fff;
                height: 55px;
                display: inline-block;
                font-size: 25px;
                line-height: 55px;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .left_value{
                color: #fff;
                height: 55px;
                display: inline-block;
                font-size: 25px;
                line-height: 55px;
            }
        }
    }

    .main_right{
        width: 500px;
        height: 500px;
        position: absolute;
        right: 70px;
        top: 170px;
        /*border: 1px solid red;*/
        .ComBox{
            width: 180px;
            height: 245px;
            background-color: #5e5e5e;
            margin-left: 68px;
            display: inline-block;
            border-radius: 30px;
            margin-bottom: 60px;
            vertical-align: top;
            color: #fff;
            .ComName{

                font-size: 30px;
                margin-left: 20px;
                margin-top: 25px;
            }
            .ConSize{
                margin-left: 20px;
                font-size: 16px;
                font-family: "微软雅黑 Light";
                color: #b4b4b4;
            }
            .ConTime{
                margin-left: 20px;
                margin-top: 15px;
                font-size: 30px;
            }
            .ConDesc{
                margin-left: 20px;
                font-size: 14px;
                font-family: "微软雅黑 Light";
                color: #b4b4b4;
            }
            .ConBtn{
                margin-left: -10px;
                margin-top: 40px;
            }
        }
    }
    .main_center{
        width: 730px;
        height: 730px;
        /*border: 1px solid red;*/
        margin: 0 auto;
        position: relative;
        top: -560px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        .TypeBox{
            width:80px;
            height: 90px;
            /*border: 1px solid red;*/
            position: absolute;
            left: 325px;
            margin-top: 320px;
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            .TypeName{
                color: #24baa6;

            }
            .TypeSize{
                color: #24baa6;
            }
        }
    }

    .pointer{
        position: absolute;
    }

    .p1{
        left: 220px;
        top: 400px;
        transform: rotate(-120deg);
    }
    .p2{
        left: 200px;
        top: 325px;
        transform: rotate(-90deg);
    }
    .p3{
        left: 200px;
        top: 240px;
        transform: rotate(-60deg);
    }
    .p4{
        left: 270px;
        top: 180px;
        transform: rotate(-35deg);
    }
    .p5{
        left: 350px;
        top: 160px;
        transform: rotate(0deg);
    }
    .p6{
        left: 420px;
        top: 190px;
        transform: rotate(30deg);
    }
    .p7{
        left: 480px;
        top: 250px;
        transform: rotate(60deg);
    }
    .p8{
        left: 500px;
        top: 325px;
        transform: rotate(90deg);
    }
    .p9{
        left: 480px;
        top: 405px;
        transform: rotate(120deg);
    }
</style>
<style >
    .el-switch__label--left {
        position: relative;
        left: 100px;
        color: #fff!important;
        z-index: -1111;
        font-size: 50px !important;
        top: -10px!important;
    }
    .el-switch__label--right {
        position: relative;
        right: 100px;
        color: #fff!important;
        z-index: -1111;
        font-size: 50px !important;
        top: -10px!important;
    }
    .el-switch__label--right.is-active {
        z-index: 1111;
        color: #fff !important;
    }
    .el-switch__label--left.is-active {
        z-index: 1111;
        color: #9c9c9c !important;
    }
    .el-switch__core{
        height: 50px !important;
        border-radius: 25px!important;
    }
    .el-switch__core:after{
        width: 55px!important;
        height: 55px!important;
        top: -4px!important;
    }
    .el-switch.is-checked .el-switch__core::after{
        margin-left: -36px!important;
    }
</style>
